import React, { Component } from 'react';
import { Modal } from 'antd';
import DragM from 'dragm';
class Drag extends Component {

  updateTransform = transformStr => {
    this.modalDom.style.transform = transformStr;
  };
  // 初始化antd组件中的 ModalDom
  componentDidMount() {
    this.modalDom = document.getElementsByClassName(
      "ant-modal-wrap"  // modal的class是ant-modal-wrap
    )[0];
  }

  render() {
    return (
      <DragM updateTransform={this.updateTransform}>
        <div>{this.props.title}</div>
      </DragM>
    );
  }
}

export default class DragModal extends Component {

  state = {
    visible: false
  }

  componentDidMount() {
    this.setState({
      visible: this.props.visible
    })
  }

  componentWillReceiveProps(nextprops) {
    this.setState({
      visible: nextprops.visible
    })
  }

  handleCancel = e => {
    // 弹窗关闭时，向子组件传递值  值为父组件身上的param
    this.setState({
      visible: false,
    }, () => {
      this.props.callback && this.props.callback();
    });

  };

  render() {
    const title = (<Drag title={this.props.title} />);
    /*
      mask 是否显示遮罩层
      maskClosable 是否点击遮罩层关闭模态框
      destroyOnClose 模态框关闭时默认销毁内部子元素
      visible 模态框展示与否
      className 控制 当前模态框的大小  size: large / default / small
    */
    const { size = 'small', mask = { backgroundColor: 'transparent' }, maskClosable = false, destroyOnClose = true, centered = true, } = this.props;
    return (
      <Modal
        className={size}
        title={title}
        visible={this.state.visible}
        onCancel={this.handleCancel}
        centered={centered}
        destroyOnClose={destroyOnClose}
        maskClosable={maskClosable}
        maskStyle={mask}
        okText='确认'
        cancelText='取消'
        footer={null}
      >
        {this.props.children}
      </Modal>
    );
  }
}
